跳到主要内容

滑动条(Slider)

The Slider 是一种经典控件,用于控制一个有界值。它允许用户通过拖动滑块手柄沿着水平或垂直槽移动来调整值。

事件

滑块释放事件(thumbReleased)

当用户释放滑块时,会触发 thumbReleased 事件。

值更改事件(valueChanged)

当滑块的值发生变化时,会触发 valueChanged 事件。

当用户拖动滑块时,valueChanged 事件会被连续触发。在某些场景中,为了提高效率,仅需要监听 thumbReleased 事件即可。

// 监听滑块释放事件
slider.bind('thumbReleased', (event: ThumbReleaseEvent): void => {
event.value; // 滑块当前的值。
});
// 监听值更改事件
slider.bind('valueChanged', (event: ValueChangeEvent): void => {
event.value; // 滑块当前的值。
})

示例代码

创建滑动条

以下代码将创建一个滑块:

const desktop = Desktop.instance();
const slider = new Slider(desktop);
slider.minimum = -45;
slider.maximum = 50;
slider.value = 26;

设置滑动条方向

构造函数中的 orientation 参数决定滑块是水平的还是垂直的:

const desktop = Desktop.instance();
const slider = new Slider(desktop, Orientation.Vertical);
slider.value = 68;